import {useStore} from "../store/catStore.ts";
import {shallow} from "zustand/shallow";

const CatController = () => {
    // const increaseBigCats=useStore.use.increaseBigCats();
    // const increaseSmallCats=useStore.use.increaseSmallCats();
    // 对象形式
    // const {increaseBigCats,increaseSmallCats} = useStore(
    //     state => ({
    //         increaseBigCats:state.increaseBigCats,
    //         increaseSmallCats:state.increaseSmallCats,
    //     }),
    //     shallow
    // );
    const [increaseBigCats,increaseSmallCats] = useStore(
        state => [state.increaseBigCats,state.increaseSmallCats],
        shallow
    );
    return (
        <div className={'box'}>
            <h1>Cat Controller</h1>
            <p>{Math.random()}</p>
            <div>
                <button onClick={increaseBigCats}>add big cat</button>
                <button onClick={increaseSmallCats}>add small cat</button>
            </div>
        </div>
    );
};

export default CatController;